<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <!-------------------------------------------->
    <!-- Other libraries and styles of your own -->
    <!-------------------------------------------->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

</head>


<body>
    <!-- 导航栏 -->
    <nav id="navbarPlaceholder"></nav>

    <!-- 轮播图区域 -->
    <div id="carouselExampleIndicators" class="carousel slide container-fluid bg-light py-5" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h1 class="display-4">科学健康</h1>
                            <p class="lead">kexuejiankang</p>
                            <p class="display-6">荤素搭配 多样化</p>
                        </div>
                        <div class="col-md-6">
                            <img src="images/c-lb1.jpg" alt="健康饮食图片1" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h1 class="display-4">均衡饮食</h1>
                            <p class="lead">junheng yinshi</p>
                            <p class="display-6">合理膳食 健康生活</p>
                        </div>
                        <div class="col-md-6">
                            <img src="images/c-lb2.jpg" alt="健康饮食图片2" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h1 class="display-4">营养搭配</h1>
                            <p class="lead">yingyang dapei</p>
                            <p class="display-6">营养均衡 活力满满</p>
                        </div>
                        <div class="col-md-6">
                            <img src="images/c-lb3.jpg" alt="健康饮食图片3" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <!-- 热门食谱分享区域 -->
    <div class="container my-5">
        <h2 class="text-center mb-5">Popular Recipes Share</h2>
        <div class="row row-cols-1 row-cols-md-3 g-4">
            <div class="col">
                <div class="card">
                    <img src="images/c-food1.jpg" class="card-img-top" alt="食谱1">
                    <div class="card-body">
                        <h5 class="card-title">Healthy salads</h5>
                        <p class="card-text">A refreshing and delicious healthy salad rich in vitamins and fiber.</p>
                        <a href="#" class="btn btn-primary">Find out more</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="images/c-food3.jpg" class="card-img-top" alt="食谱2">
                    <div class="card-body">
                        <h5 class="card-title">Steamed fish</h5>
                        <p class="card-text">Tender and delicious steamed fish, rich in nutrients.</p>
                        <a href="#" class="btn btn-primary">Find out more</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="images/c-food2.jpg" class="card-img-top" alt="食谱3">
                    <div class="card-body">
                        <h5 class="card-title">Vegetable broth</h5>
                        <p class="card-text">A warm and nourishing vegetable soup for all seasons.</p>
                        <a href="#" class="btn btn-primary">Find out more</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center mt-5">
            <a href="#" class="btn btn-dark">More Recipes</a>
        </div>
    </div>

    <!-- 健康信息区域 -->
    <div class="container my-5 bg-light p-5">
        <h2 class="text-center mb-5">Up-to-date health information</h2>
        <div class="row row-cols-1">
            <div class="col mb-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">The nutritional secrets of fruits</h5>
                        <p class="card-text">Different fruits are rich in vitamins and minerals, and knowing their
                            nutrient content can help you make healthier fruit choices.</p>
                    </div>
                </div>
            </div>
            <div class="col mb-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">The importance of cereals</h5>
                        <p class="card-text">Cereals are an important part of our diet, providing a rich source of
                            carbohydrates and dietary fiber.</p>
                    </div>
                </div>
            </div>
            <div class="col mb-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Source of protein</h5>
                        <p class="card-text">In addition to meat, there are many plant - based foods that also provide
                            high - quality protein, such as legumes and nuts.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center">
            <a href="#" class="btn btn-link">Click to expand more health information</a>
        </div>
    </div>

    <!-- 评论区 -->
    <div class="container my-5 bg-light p-5">
        <h2 class="text-center mb-5">Comments section</h2>
        <form>
            <div class="mb-3">
                <input type="text" class="form-control" placeholder="Your nickname">
            </div>
            <div class="mb-3">
                <textarea class="form-control" placeholder="Write your comment"></textarea>
            </div>
            <button type="submit" class="btn btn-dark w-100">Submit a comment</button>
        </form>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white text-center py-3">
        &copy; 2025 Dietary Diet Community, All Rights Reserved
    </footer>

    

    <script src="./scripts/skeleton.js"></script>
    <script src="./scripts/script.js"></script>
</body>

</html>
    